<template>
    <div class="classifyBox">
        <div class="classifyList">
            <div class="remarkBox">
                <div class="font28">订单备注</div>
            </div>
            <div class="remarkBox marT40">
                <textarea class="remarkInput font28 pad24" maxlength="50" rows="4" placeholder="请输入口味、偏好等要求"/>
                <div class="num">0/50</div>
            </div>
        </div>
        <div class="replaceBottomBox">
            <div class="btn cancelBtn">返回</div>
            <div class="btn surnBtn">确认</div>
        </div>
    </div>
</template>
<style lang="scss" scoped>
    .classifyBox{
        .classifyList{ margin: 5.3%; padding: 5.3%; background-color: #fff; border-radius: 0.3rem; box-sizing: border-box;
            .filterList{ position: relative; display: flex; display: -webkit-flex; flex-wrap: wrap; -webkit-flex-wrap: wrap;  align-content: flex-start; -webkit-align-content: flex-start;
                .photo{ display: block; text-align: center; overflow: hidden; width: 4.25rem;  height: 4.25rem; border-radius: 0.3rem;}
                .filterItem{ flex: 1; display: flex; flex-direction: column; justify-content: space-between;
                .itemspan{ overflow: hidden; text-overflow: ellipsis; display: -webkit-box; -webkit-line-clamp: 2;-webkit-box-orient: vertical;
                    .num{ background-color: #ffeca9; color: #feb329; border-radius: 5px;padding: 0 0.25rem; margin-right: 0.25rem;}
                }
                }
                &:first-child{ padding-top: 0;}
                &+.filterList:after{content: " "; position: absolute; left: 0.4rem; top: 0; right: 0.4rem; height: 1px; border-top: 1px solid #E5E5E5; color: #E5E5E5; -webkit-transform-origin: 0 0; transform-origin: 0 0; -webkit-transform: scaleY(0.5); transform: scaleY(0.5);}
            }
            .totalBox{ flex: 1; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: flex-end; -webkit-justify-content: flex-end; }
            .remarkBox{ position: relative; display: flex; display: -webkit-flex; align-items: center; -webkit-align-items: center; justify-content: space-between; -webkit-justify-content: space-between;
                .remarkInput{
                    flex: 1; background: transparent; border: 1px solid #dedede; outline: none; border-radius: 0.3rem; resize: none; color: #333; line-height: normal;
                    &::-webkit-input-placeholder{ color: #929292;}
                }
                .num{
                    position: absolute;
                    bottom: 2.4%;
                    right: 2.4%;
                    font-size: 0.6rem;
                    color: #929292;
                }
            }
        }
        .replaceBottomBox{ position: fixed; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; align-items: center; height: 2.75rem; line-height: 2.75rem; overflow: hidden; font-size: 0.7rem; background-color: #fff;
            .btn{ height: 2rem; line-height: 2rem; border-radius: 0.5rem; margin: 0 0.75rem;}
            .cancelBtn{ flex: 1; text-align: center; color: #333; margin-right: 0.375rem; border: 1px solid #333;}
            .surnBtn{ flex: 1; text-align: center; color: #333; margin-left: 0.375rem; background-image: linear-gradient(to right,$mainColor,#ffae44);}
        }
    }
</style>